<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>注册</title>
<link rel="icon" type="image/x-icon"href="../static/img/HomePageImg/cat2.jpg" />
<!--引入bootstrap样式文件--->
<link rel="stylesheet" type="text/css"
	href="../static/bootstrap-3.3.7/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="../static/css/HomePageCss/top.css" />
<link rel="stylesheet" href="../static/css/HomePageCss/cool.css" />
<link rel="stylesheet" href="../static/css/cwx/registe.css" />
<link rel="stylesheet" href="../static/css/HomePageCss/bottom.css" />
<link rel="stylesheet" href="../static/css/HomePageCss/login.css" />
<link rel="stylesheet" href="../static\css\sj\product.css" />
<!--引入jquery-->
<script type="text/javascript"
	src="../static/js/HomePageJs/iquery-1.12.4/jquery-1.12.4.min.js"></script>
<!--引入layer-->
<script type="text/javascript"
	src="../static/js/HomePageJs/layer-v3.1.1/layer/layer.js"></script>
<!--引入bootstrap脚本--->
<script type="text/javascript"
	src="../static/bootstrap-3.3.7/dist/js/bootstrap.min.js"></script>
<script type="text/javascript"
	src="../static/js/HomePageJs/jquery.pin.js"></script>
<script type="text/javascript">
	// 验证form表单是否合法
	function checkMe() {
		// 错误提示信息
		var strMsg = "";
		// 用户昵称验证
		var regName = /^.\S{3,5}$/;
		var username = document.getElementById("username").value;
		if (username == null || username == ""
				|| regName.test(username) === false) {
			// 增加提示信息
			strMsg += "请输入用户名!<br>";
		}
		// 密码验证
		var regPsw = /^.[A-z0-9]{7,11}$/;
		var userpsw = document.getElementById("userpsw").value;
		if (userpsw == null || userpsw == "" || regPsw.test(userpsw) === false) {
			// 增加提示信息
			strMsg += "请输入正确格式的密码!<br>";
		}
		var userpsw2 = document.getElementById("userpsw2").value;
		if (userpsw != userpsw2) {
			// 增加提示信息
			strMsg += "两次密码不一致！";
		}
		// 性别单选框验证
		// 获取所有的单选框对象
		// 获取的是存储多个单选对象的数组
		var radioSexs = document.getElementsByName("usersex");
		var isCheckedSex = false; // 默认没有选择
		// 循环遍历来确定是否进行了选择【循环肯定或循环否定法】
		if (radioSexs != null && radioSexs.length > 0) {
			for (var i = 0; i < radioSexs.length; i++) {
				// 有选择的选项，则修改标识变量
				if (radioSexs[i].checked) {
					isCheckedSex = true;
					// 终止
					break;
				}
			}
		}
		// 判定是否选择了性别
		if (isCheckedSex == false) {
			// 没有选择性别，提示
			// 增加提示信息
			strMsg += "请选择性别!<br>";
		}
		// 居住地验证
		var userlocation = document.getElementById("userlocation").value;
		if (userlocation == null || userlocation == "") {
			// 增加提示信息
			strMsg += "请输入居住地 !<br>";
		}
		// 手机号验证
		var regModile = /^1\d{10}$/;
		var usertel = document.getElementById("usertel").value;
		if (usertel == null || usertel == ""
				|| regModile.test(usertel) === false) {
			// 增加提示信息
			strMsg += "请输入正确的手机号!<br>";
		}
		//验证码验证
		var yzm = document.getElementById("yzm").value;
		var yzm2 = document.getElementById("yzm2").value;
		if (yzm == null || yzm == "" || yzm != yzm2) {
			// 增加提示信息
			strMsg += "请输入正确的验证码!";
		}
		// 判定整个表单是否可以进行提交
		if (strMsg == "") {
			// 验证通过
			
			return true;
		} else {
			// 验证不通过
			layer.open({
				title : '提示',
				content : strMsg
			});
			return false;
		}
	}
	// 手动提交form表单
	function doSubmit() {
		document.getElementById("form0").submit();
	}
</script>
</head>

<body id="rbody">

	<!--最上面的黑色框框，为什么定不住-->
	<div class="top_box pinned">
		<div class="top_cont ">


			<div style="display: none;" id="userstatus">
				<div class="top_login_r top_red">
					<div class="top_login_title">
						<a href="shopping/shoppingcarmain.jsp" target="_blank">购物车</a> <span
							id="top_cart_count">0</span>
					</div>


				</div>
				<ul class="top_login top_red">
					<li><a href="cwx/account.jsp" target="_blank">账户信息</a></li>
					<li><a href="exit.jsp" target="_top">退出登录</a></li>
				</ul>
			</div>
			<ul class="top_login top_red">
				<li class="toindex"><a href="homepage.jsp">联想商城首页</a></li>
				<li class="toindex" style="border-right: none; float: right;"><a
					href="##">线下门店</a>
			</ul>
		</div>
	</div>

	<!--第二行不是那么黑的框框-->
	<div id="search" class="searchSytle text-center pinned">
		<ul>
			<!--链接到人家官网的各种-->
			<li><a
				href="https://s.lenovo.com.cn/index.html?destination=3&key=%E6%89%8B%E6%9C%BA"
				target="_blank"> 全部商品 </a></li>
			<li><a
				href="https://s.lenovo.com.cn/?key=%E8%81%94%E6%83%B3%E6%89%8B%E6%9C%BA"
				target="_blank"> 联想手机</a></li>
			<li><a href="https://www.motorola.com.cn/store/list/133.html"
				target="_blank"> moto手机</a></li>
			<li><a
				href="https://s.lenovo.com.cn/?key=%E6%89%8B%E6%9C%BA&destination=3&index=889-891"
				target="_blank"> 智能配件</a></li>
			<li><a href="https://shop.lenovo.com.cn/zcode/index.html"
				target="_blank"> Z码通道</a></li>
			<!--没有什么卵用的搜索框-->
			<li><input type="text" class="form-control"
				placeholder="请输入搜索内容" /></li>
			<li style="display:none"><a href="(ˉ▽￣～) ~~(ˉ▽￣～) ~~(ˉ▽￣～) ~~(ˉ▽￣～) ~~"><img
					src="../static/img/HomePageImg/bigger.png" /></a></li>
			<li><a href="javascript:;" target="_blank" id="我要删你兄弟"> <img
					src="../static/img/HomePageImg/loginImg.png" id="登录图标"
					onclick="ShowLogin()" />
			</a></li>
			<li><img src="../static/img/HomePageImg/registerGift.png" id="注册有礼"
				width="160px" height="32px" /></li>
		</ul>
	</div>

	<!--左上角的联想图标-->
	<div class="logo pinned">
		<a href="//www.lenovo.com.cn"> <img
			src="../static/img/HomePageImg/Lenovo.jpg" />
		</a>
	</div>

	<!--注册表单-->
	<div>
	<div class="registe ">

		<div class="ioc_text">
			<div class="联想会员注册"></div>
		</div>

		<div>
		<form  id="form0" action="../UserRegister" method="post">
			<!-- 约定：表达的name属性值和数据库的字段名保持一致【大小写敏感】 -->
			<div  class="registe-content">
			
				<div class="bootint">
					<span class="input-span-text ">用户昵称</span>
					<input type="text" class=" form-control3 " id="username"
						name="username" placeholder="请输入用户名（4-6位非空字符）">
					<!--  <span class="right-span-text ">4-6位非空字符</span>	 -->
				</div>
			
			<div class="bootint">
				<span class="input-span-text ">密码</span>
				<input type="password" class="form-control3 " id="userpsw"
						name="userpsw" placeholder="请输入密码（8-12位字母或数字）">
				<!-- <span class="right-span-text ">8-12位字母或数字</span> -->
			</div>
			
			<div class="bootint">
			<span class="input-span-text ">确认密码</span>
					<input type="password" class=" form-control3" id="userpsw2"
						name="userpsw2" placeholder="请再次输入密码（与第一次输入的密码一致）">
			</div>
			
			<div class="bootint">
			<span class="input-span-text ">性别</span>
			<input type="radio" id="male" name="usersex" value="男" style="margin:12px 0px 12px 60px"/>男 
			<input type="radio" id="female" name="usersex" value="女"style="margin:12px 0px 12px 60px" />女
			</div>
			
			<div class="bootint">
			<span class="input-span-text ">居住地</span>
					<input type="text" class="form-control3" id="userlocation"
						name="userlocation" placeholder="请输入居住地">
			</div>
			
			<div class="bootint">
				<span class="input-span-text ">手机号</span>
					<input type="text" class="form-control3" id="usertel" name="usertel"
						placeholder="请输入手机号">
			</div>
			
			<div class="bootint">
				<input type="text" class="form-control4" id="yzm"
						name="yzm" placeholder="请输入验证码"> 
				<button type="button" class="btn-default btn2" id="hqyzm"
					onclick="doAjaxSMS()">获取验证码</button>
				<input type="hidden" id="yzm2" name="yzm2" />
			</div>
			
			<div style="padding-top:30px;">
				<button type="submit" class="btn btn-danger btn-lg btn-block " id="rebtn"onclick="return checkMe()"  >立即注册
				</button>
			</div>
			
			</div>
		</form>
		</div>
	</div>
	</div>

	<!--最下面那一条黑不拉几的-->
	<div class="footer" style="height: 46px">
		<div class="foot_bot_con ">
			<div class="foot_bot_left fl">
				版权所有：1998-2018 联想集团 <span>|</span> <a
					href="(ˉ▽￣～) ~~(ˉ▽￣～) ~~(ˉ▽￣～) ~~(ˉ▽￣～) ~~" title="法律公告"
					target="_blank">法律公告</a> <span>|</span> <a
					href="(ˉ▽￣～) ~~(ˉ▽￣～) ~~(ˉ▽￣～) ~~(ˉ▽￣～) ~~" title="隐私保护"
					target="_blank">隐私保护</a> <span>|</span> <a
					href="(ˉ▽￣～) ~~(ˉ▽￣～) ~~(ˉ▽￣～) ~~(ˉ▽￣～) ~~" title="产品安全"
					target="_blank">产品安全</a>
			</div>
			<div class="foot_bot_right fr">
				<a href="(ˉ▽￣～) ~~(ˉ▽￣～) ~~(ˉ▽￣～) ~~(ˉ▽￣～) ~~" rel="nofollow"
					target="_blank">京ICP备11035381</a> <span>|</span><i
					style="font-style: normal;">京公网安备110108007970号</i> <span>|</span> <a
					href="(ˉ▽￣～) ~~(ˉ▽￣～) ~~(ˉ▽￣～) ~~(ˉ▽￣～) ~~" title="营业执照"
					target="_blank">营业执照：110000410127232</a>
			</div>
		</div>
	</div>

</body>
<script type="text/javascript">

// 	//使用jquery进行  注册操作
// 		function doAjaxUpdate() {
// 			// 使用jquery进行ajax请求处理
// 			$.ajax({
// 				type : "POST", // 请求类型
// 				url : "../UserRegister", // 请求的url
// 				data : $("#form0").serialize(), // 发送的数据 使用serialize方法替代手动拼写数据串
// 	// 			dataType : "json", // 响应发挥的数据类型  
// 				success : function(data, textStatus, jqXHR) {
// 				if(data > 0){
// 					alert("注册成功!");
// 					//跳转
// 					skip();
// 				}
// 				},
// 				error : function(data) {
// 					alert("注册失败" + data);
// 				}
// 			});
// 			}
	//短信验证函数
	function doAjaxSMS() {
		//短信验证
		var regModile = /^1\d{10}$/;
		var usertel = document.getElementById("usertel").value;
		if (usertel == null || usertel == ""
				|| regModile.test(usertel) === false) {
			// 手机验证失败
			alert("请输入正确手机号!");
		} else {
			//手机验证通过
			$.ajax({
				type : "POST", // 请求类型
				url : "../Sms", // 请求的url
				data : "usertel=" + $("#usertel").val(),// 发送的数据 使用serialize方法替代手动拼写数据串
				// 			dataType : "json",
				success : function(data, textStatus, jqXHR) { // 执行成功之后的回调函数
					// 回调函数的dom操作
					alert("验证码为" + data);//便于测试，正式上线删除
					document.getElementById("yzm2").value = data;
				},
				error : function(data) {
					alert("请求失败" + data);
				}
			});
		}
	}
	
</script>
<script type="text/javascript"
	src="static/js/HomePageJs/layer-v3.1.1/layer/layer.js"></script>
<script type="text/javascript ">
		function ShowLogin() {
			layer.open({
				type: 2,
    			title: '登录',
    			maxmin: true,
    			area: ['800px', '600px'],
    			content: '../userlogin_1.jsp',
			});
		}
</script>
<script type="text/javascript ">
	$(document).ready(function(){
		var o=document.getElementById("我要删你兄弟");//获取父节点
		var a=document.getElementById("登录图标");//获取需要删除的子节
		//获取用户的登录账号（手机号）
		var $isLogin=<%=session.getAttribute("userTel")%>
		//判断是否登录
		if($isLogin == null ||  typeof($isLogin) == "undefined"|| $isLogin == ""){
			
		}else{
			
			o.removeChild(a); //从父节点o上面移除子节点a;
			$("#我要删你兄弟").html("<span ><%=session.getAttribute("userName")%></span>");
			document.getElementById("userstatus").style.display="";
		}
	});


</script>
</html>